<template>
  <div class="contarner-page" @click.stop="showLanguageHandel">
    <page-header ref="languageRef"></page-header>
    <main>
      <div class="downloader flex_ccenter" v-if="!success">
        <div class="container">
          <div class="hero-widgets flex_between c-fff">
            <div class="tool-item shou flex_center" @click="changeTab(0)">
              <img src="/static/images/video.svg" alt="savinginsta video" />
              <span class="f-16">Video</span>
            </div>
            <div class="tool-item shou flex_center" @click="changeTab(1)">
              <img src="/static/images/Photo.svg" alt="savinginsta photo" />
              <span class="f-16">Photo</span>
            </div>
            <div class="tool-item shou flex_center" @click="changeTab(2)">
              <img src="/static/images/Reels.svg" alt="savinginsta reels" />
              <span class="f-16">Reels</span>
            </div>
            <div class="tool-item shou flex_center" @click="changeTab(3)">
              <img src="/static/images/Story.svg" alt="savinginsta story" />
              <span class="f-16">Story</span>
            </div>
            <div class="tool-item shou flex_center" @click="changeTab(4)">
              <img src="/static/images/Igtv.svg" alt="savinginsta IGTV" />
              <span class="f-16">IGTV</span>
            </div>
          </div>
          <div class="banner-heading flex_ccenter">
            <div class="heading-item" v-show="current == 0">
              <h1 class="title fw700 f-42 c-fff">Instagram Video Download</h1>
              <h2 class="sub c-fff f-18 fw400">
                Download Instagram Videos, Photos, Reels, Stories, and IGTV
                Content Online
              </h2>
            </div>
            <div class="heading-item" v-show="current == 1">
              <nuxt-link to="/instagram-photo-download">
                <div @click="goToTop('Photo')" class="tItem">
                  <h3 class="title fw700 f-42 c-fff shou">
                    Instagram Photo Downloader
                  </h3>
                </div>
              </nuxt-link>
              <p class="sub c-fff f-18 fw400">
                Enter the Instagram PHOTO URL below
              </p>
            </div>
            <div class="heading-item" v-show="current == 2">
              <nuxt-link to="/instagram-reels-video-download">
                <div @click="goToTop('reels')" class="tItem">
                  <h3 class="title fw700 f-42 c-fff shou">
                    Download Instagram Reels
                  </h3>
                </div>
              </nuxt-link>
              <p class="sub c-fff f-18 fw400">
                Enter the Instagram Reels URL below
              </p>
            </div>
            <div class="heading-item" v-show="current == 3">
              <nuxt-link to="/instagram-story-download">
                <div @click="goToTop('story')" class="tItem">
                  <h3 class="title fw700 f-42 c-fff shou">
                    Instagram Story Download
                  </h3>
                </div>
              </nuxt-link>
              <p class="sub c-fff f-18 fw400">
                Enter the Instagram Stories URL below
              </p>
            </div>
            <div class="heading-item" v-show="current == 4">
              <nuxt-link to="/igtv-downloader">
                <div @click="goToTop('igtv')" class="tItem">
                  <h3 class="title fw700 f-42 c-fff shou">
                    Download Video IGTV
                  </h3>
                </div>
              </nuxt-link>
              <p class="sub c-fff f-18 fw400">
                Enter the Instagram IGTV URL below
              </p>
            </div>
          </div>
          <div class="form flex_center">
            <div class="input-box flex_between">
              <!-- <input
                type="text"
                class="input f-18"
                v-model="input"
                @input="handleInput"
                @paste="handleInput"
                placeholder="Paste URL Instagram"
                list="fruits"
                name="fruit"
              />
              <datalist id="fruits">
                <option value="Apple"></option>
                <option value="Banana"></option>
                <option value="Cherry"></option>
              </datalist> -->
              <input
                type="text"
                class="input f-18"
                v-model="input"
                :disabled="isHttpLoading"
                @input="handleInput"
                @paste="handleInput"
                @keydown="sendDownload($event)"
                placeholder="Paste URL Instagram"
              />
              <div
                class="Paste shou flex_center"
                @click="handleClickPasted"
                v-if="input == ''"
              >
                <div class="btnbg"></div>
                <div class="f-16 c-000 fw700">Paste</div>
              </div>
              <div
                class="clear shou flex_center"
                v-if="input != '' && !isHttpLoading"
                @click.stop="input = ''"
              >
                <div class="btnbg"></div>
                <div class="f-16 c-000 fw700">Clear</div>
              </div>
            </div>
            <div
              v-if="!isHttpLoading"
              @click.stop="downloadHandel"
              class="submit shou fw700 c-fff flex_center"
            >
              Download
            </div>
            <div v-else class="submit shou fw700 c-fff flex_center">
              Please wait
            </div>
          </div>
          <div class="app-submit flex_ccenter">
            <div
              class="submit flex_center"
              v-if="!isHttpLoading"
              @click.stop="downloadHandel"
            >
              <div class="fw700 c-fff f-21">Download</div>
            </div>
            <div class="submit flex_center" v-else>
              <div class="fw700 c-fff f-21">Please wait</div>
            </div>
          </div>
          <div class="loading" v-if="isHttpLoading">
            <div class="loading-dots flex_center">
              <div class="dot"></div>
              <div class="dot"></div>
              <div class="dot"></div>
              <div class="dot"></div>
            </div>
            <div class="tips f-18 flex_center">
              <div>If you are retrieving data, please wait a few seconds!</div>
            </div>
          </div>
          <div class="error flex_ccenter" v-if="httpError1">
            <div class="hono flex_">
              <div class="error-img"></div>
              <div class="error-img"></div>
              <div class="error-img"></div>
            </div>
            <div class="errMsg f-18">
              The site can not process your link because it is private
            </div>
          </div>
          <div class="error flex_ccenter" v-if="httpError2">
            <div class="hono flex_">
              <div class="error-img"></div>
              <div class="error-img"></div>
              <div class="error-img"></div>
            </div>
            <div class="errMsg f-18">
              The data you entered is not a link. Please enter a valid link, for
              example:
              <div>https://www.instagram.com/reel/Cm19qu-ISqx</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 广告位start -->
      <!-- 广告位end -->
      <div class="container" v-if="!success">
        <div class="body-content">
          <div class="title-box">
            <h3 class="title f-36 c-000 italic">
              All features of Savinginsta.Com
            </h3>
            <p class="sub f-16 c-ccc">
              Savinginsta is compatible with all varieties of Instagram video
              and image links.
            </p>
          </div>
          <div class="list-tools-pc">
            <div class="tool-box flex_between">
              <div class="tool-info">
                <nuxt-link to="/">
                  <div @click="goToTop('video')" class="tItem">
                    <h4>Instagram video downloader</h4>
                  </div>
                </nuxt-link>
                <p>
                  Savinginsta enables you to download your content from
                  Instagram. It offers support for downloading both individual
                  and multiple videos from Instagram.
                </p>
              </div>
              <div class="tool-thumb">
                <img
                  src="/static/images/instagram-video-downloader.webp"
                  alt="Instagram video downloader"
                />
              </div>
              <div class="tool-thumb-app">
                <img
                  src="/static/images/instagram-video-downloader-app.webp"
                  alt="Instagram video downloader"
                />
              </div>
            </div>
            <div class="tool-box tool-reverse flex_between">
              <div class="tool-info">
                <nuxt-link to="/instagram-photo-download">
                  <div @click="goToTop('Photo')" class="tItem">
                    <h4>Instagram photo downloader</h4>
                  </div>
                </nuxt-link>
                <p>
                  Savinginsta's Instagram Photo Downloader makes saving any
                  single or multiple photos, including collages, from Instagram
                  effortless. This tool makes downloading individual post images
                  or a collection of Instagram photos simple.
                </p>
              </div>
              <div class="tool-thumb">
                <img
                  loading="lazy"
                  src="/static/images/instagram-photo-downloader.webp"
                  alt="Instagram photo downloader"
                />
              </div>
              <div class="tool-thumb-app">
                <img
                  loading="lazy"
                  src="/static/images/instagram-photo-downloader-app.webp"
                  alt="Instagram photo downloader"
                />
              </div>
            </div>
            <div class="tool-box flex_between">
              <div class="tool-info">
                <nuxt-link to="/instagram-reels-video-download">
                  <div @click="goToTop('reels')" class="tItem">
                    <h4>Download Instagram Reels</h4>
                  </div>
                </nuxt-link>
                <p>
                  Savinginsta's Instagram Reels Downloader enables you to
                  effortlessly download Reels videos from Instagram posts to
                  your device, providing a simple solution where Instagram
                  offers no support for this function.
                </p>
              </div>
              <div class="tool-thumb">
                <img
                  loading="lazy"
                  src="/static/images/download-instagram-reels.webp"
                  alt="Download Instagram Reels"
                />
              </div>
              <div class="tool-thumb-app">
                <img
                  loading="lazy"
                  src="/static/images/download-instagram-reels-app.webp"
                  alt="Download Instagram Reels"
                />
              </div>
            </div>
            <div class="tool-box tool-reverse flex_between">
              <div class="tool-info">
                <nuxt-link to="/igtv-downloader">
                  <div @click="goToTop('igtv')" class="tItem">
                    <h4>IGTV downloader</h4>
                  </div>
                </nuxt-link>
                <p>
                  Instagram stories offer a distinctive platform for users to
                  share their daily experiences through photos and videos with a
                  broad audience. Occasionally, you might wish to save a
                  favorite story, but this functionality isn't available in the
                  app. Keeping Instagram provides a solution that allows users
                  to download and view Instagram stories offline. This way, your
                  precious content will be recovered by a network connection.
                </p>
              </div>
              <div class="tool-thumb">
                <img
                  loading="lazy"
                  src="/static/images/igtv-downloader.webp"
                  alt="IGTV downloader"
                />
              </div>
              <div class="tool-thumb-app">
                <img
                  loading="lazy"
                  src="/static/images/igtv-downloader-app.webp"
                  alt="IGTV downloader"
                />
              </div>
            </div>
            <div class="tool-box flex_between">
              <div class="tool-info">
                <nuxt-link to="/instagram-story-download">
                  <div @click="goToTop('story')" class="tItem">
                    <h4>Instagram Story Viewer</h4>
                  </div>
                </nuxt-link>
                <p>
                  IGTV offers extended-length videos; if you cannot view them
                  immediately, you can download these IGTV videos to your PC. It
                  allows you to conveniently revisit and enjoy them later, even
                  without an internet connection and eliminates concerns about
                  the IGTV content being removed or unavailable.
                </p>
              </div>
              <div class="tool-thumb">
                <img
                  loading="lazy"
                  src="/static/images/instagram-story-download.webp"
                  alt="Instagram Story Download"
                />
              </div>
              <div class="tool-thumb-app">
                <img
                  loading="lazy"
                  src="/static/images/instagram-story-download-app.webp"
                  alt="Instagram Story Download"
                />
              </div>
            </div>
          </div>
          <div class="app-box">
            <div class="app-box__info">
              <h3 class="app-box__title f-21 fw700 c-000">
                Download with app Insta Downloader
              </h3>
              <p class="f-16 c-ccc">
                Our app offers a quick and simple solution for downloading
                Instagram videos, providing HD quality videos without
                watermarks.
              </p>
            </div>
            <div class="app-link">
              <a
                target="_blank"
                href="https://play.google.com/store/apps/details?id=ins.freevideodownload.pro"
              >
                <img src="/static/images/google-play.webp" alt="Download app" />
              </a>
              <a
                href="https://apps.apple.com/us/app/repost-for-video-save-story/id6462401460"
                target="_blank"
              >
                <img src="/static/images/IOS.webp" alt="Download app" />
              </a>
            </div>
          </div>
          <div class="quick-info">
            <h3 class="f-32 c-000">
              SAVINGINSTA - BEST TOOL INSTAGRAM DOWNLOADER
            </h3>
            <p class="f-16 c-ccc">
              Savinginsta stands out as a top-tier Instagram downloader,
              expertly crafted to download high-quality content from Instagram
              swiftly. The Savinginsta downloader is a top third-party option
              for downloading Instagram content.
            </p>
            <p class="f-16 c-ccc">
              Instagram, renowned as the world's most popular photo-sharing app,
              witnesses the upload of millions of photos daily. For such
              moments, the necessity of an Instagram video downloader becomes
              evident, providing a seamless solution for your immediate needs.
              This tool is essential for efficiently preserving their favorite
              Instagram content.
            </p>
          </div>
          <div class="features c-fff">
            <h3 class="h3 fw700 f-21">
              Features of Savinginsta Instagram Video Downloader:
            </h3>
            <div class="attributes-list flex_between">
              <div class="item flex_">
                <div class="bgimg"></div>
                <div class="f-14 c-fff">
                  Download the Instagram video quickly and safely.
                </div>
              </div>
              <div class="item flex_">
                <div class="bgimg"></div>
                <div class="f-14 c-fff">
                  You have the option to sign out of your Instagram account.
                </div>
              </div>
              <div class="item flex_">
                <div class="bgimg"></div>
                <div class="f-14 c-fff">
                  You may download Instagram images and videos with just a
                  button click.
                </div>
              </div>
              <div class="item flex_">
                <div class="bgimg"></div>
                <div class="f-14 c-fff">
                  Save and download photos and videos in their original
                  high-resolution and quality.
                </div>
              </div>
              <div class="item flex_">
                <div class="bgimg"></div>
                <div class="f-14 c-fff">
                  From personal accounts, download and save Instagram videos.
                </div>
              </div>
              <div class="item flex_">
                <div class="bgimg"></div>
                <div class="f-14 c-fff">
                  High speed: Currently, Savinginsta offers the fastest download
                  speeds.
                </div>
              </div>
            </div>
          </div>
          <div class="how">
            <div class="how-title">
              <h3 class="f-36 c-000 italic">
                How to save from IG using Savinginsta Instagram Downloader.
              </h3>
              <div class="note c-ccc f-16">
                Note: Ensure the Instagram video or photo you wish to download
                is from a public account.
              </div>
            </div>
            <div class="steps">
              <div class="step">
                <div class="one">
                  <span class="fw700 c-blue f-16">Step01:</span>
                  <span class="f-16 c-000"
                    >Copy the URL of Instagram Photos & Videos</span
                  >
                </div>
                <div class="app-step">
                  <div class="fw700 c-000 f-16">On the Instagram App:</div>
                  <div class="c-000 f-16">
                    For iOS users: Tap to acquire the URL of the Instagram
                    image.
                  </div>
                  <div class="c-000 f-16">
                    For Android: Click above the post and select 'Copy the
                    Instagram URL,' then hit 'Copy Share URL.'
                  </div>
                  <div class="fw700 c-000 f-16">On PC/Mac:</div>
                  <div class="c-000 f-16">
                    Right-click on the Instagram video or photo date and select
                    "Copy Link Address" to download Instagram content on your
                    desktop.
                  </div>
                </div>
              </div>
              <div class="step">
                <div class="one">
                  <span class="fw700 c-blue f-16">Step02:</span>
                  <span class="f-16 c-000">
                    Paste the URL into Savinginsta.com</span
                  >
                </div>
                <div class="app-step">
                  <div class="c-000 f-16">
                    Go to Savinginsta, the dedicated Instagram downloader.
                  </div>
                  <div class="c-000 f-16">
                    Copy and paste the copied URL into the given text field.
                  </div>
                </div>
              </div>
              <div class="step">
                <div class="one">
                  <span class="fw700 c-blue f-16">Step03:</span>
                  <span class="f-16 c-000">Initiate the Download</span>
                </div>
                <div class="app-step">
                  <div class="c-000 f-16">
                    Click the "Download" button to start the Instagram video or
                    photo download process.
                  </div>
                  <div class="fw700 c-000 f-16">
                    Important Usage Information
                  </div>
                  <div class="c-000 f-16">
                    Savinginsta primarily to download videos and images from
                    your Instagram account.
                  </div>
                  <div class="c-000 f-16">
                    Your privacy is our top concern, and we reserve the right to
                    deny service if our tools are misused to violate someone
                    else's privacy or to access unauthorized content.
                  </div>
                </div>
              </div>
            </div>
            <div class="user-note f-16">
              <div class="app-tip"></div>
              Please read our full

              <a class="fw700 c-blue" href="/terms-of-service">
                Terms of Service </a
              >here to understand our policies comprehensively.
            </div>
          </div>
          <div class="faq-section">
            <h3 class="faq-title f-36 c-000 italic">FAQ</h3>
            <div class="accordion">
              <div
                id="faq"
                itemscope="itemscope"
                itemtype="https://schema.org/FAQPage"
              >
                <div
                  itemprop="mainEntity"
                  itemscope="itemscope"
                  itemtype="https://schema.org/Question"
                  class="accordion-item"
                  :key="k"
                  v-for="(item, k) in faqList"
                >
                  <h4 itemprop="name" class="accordion-title fw700 f-16">
                    {{ item.title }}
                  </h4>
                  <div
                    itemprop="acceptedAnswer"
                    itemscope=""
                    itemtype="https://schema.org/Answer"
                  >
                    <div
                      itemprop="text"
                      class="accordion-text f-16 c-ccc fw400"
                    >
                      {{ item.content }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 解析结果 start -->
      <div class="container" v-if="success">
        <success-content
          @refresh="refresh"
          :list="successList"
        ></success-content>
      </div>
      <!-- 解析结果 end -->
    </main>
    <footer>
      <div class="container">
        <div class="footer-content">
          <div class="footer-link">
            <div class="row flex_between">
              <div class="col-12">
                <div class="link-label fw700 c-000 f-21">Tools</div>
                <ul class="list-unstyled c-ccc f-16">
                  <li @click="goToTools('story')">
                    <nuxt-link to="/instagram-story-download"
                      >Instagram Story Downloader</nuxt-link
                    >
                  </li>
                  <li @click="goToTools('reels')">
                    <nuxt-link to="/instagram-reels-video-download"
                      >Instagram Reels Downloader</nuxt-link
                    >
                  </li>
                  <li>
                    <a href="https://savingtik.com/" target="_blank"
                      >Tiktok Downloader</a
                    >
                  </li>
                </ul>
              </div>
              <div class="col-6">
                <div class="link-label fw700 c-000 f-21">Support</div>
                <ul class="list-unstyled c-ccc f-16">
                  <li>
                    <nuxt-link to="/contact"> Contact </nuxt-link>
                  </li>
                  <li>
                    <nuxt-link to="/blog"> Blog </nuxt-link>
                  </li>
                </ul>
              </div>
              <div class="col-6">
                <div class="link-label fw700 c-000 f-21">Legal</div>
                <ul class="list-unstyled c-ccc f-16">
                  <li>
                    <nuxt-link to="/terms-of-service">
                      Terms of Service
                    </nuxt-link>
                  </li>
                  <li>
                    <nuxt-link to="/privacy-policy"> Privacy Policy </nuxt-link>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="copyright flex_ccenter">
            <b class="fw700 f-21 c-000"
              >We are not affiliated with Instagram or Meta</b
            >
            <div class="c-ccc f-16">
              © {{ new Date().getFullYear() }} Insta Downloader All rights
              reserved.
            </div>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from "vuex";
import pageHeader from "~/components/page-header.vue";
import SuccessContent from "~/components/success-content.vue";
import CryptoJS from "crypto-js";
import { handleClick, checkString } from "@/plugins/Firebase.js";

export default {
  components: { pageHeader, SuccessContent },
  name: "IndexPage",
  head: {
    htmlAttrs: {
      lang: "en",
    },
    bodyAttrs: {
      "data-lang": "en",
    },
    title: "Instagram Downloader - Download Instagram Video online",
    meta: [
      { property: "og:locale", content: "en" },
      //Page Information
      {
        name: "description",
        content:
          "Savinginsta: Easily download Instagram videos, reels, and photos with our user-friendly tool. Save your Instagram videos quickly and safely on any device.",
      },
      //Schema.org Microdata
      {
        itemprop: "name",
        content: "Instagram Downloader - Download Instagram Video online",
      },

      // Facebook / OpenGraph
      {
        property: "og:title",
        content: "Instagram Downloader - Download Instagram Video online",
      },
      { property: "og:type", content: "website" },
      { property: "og:url", content: "https://savinginsta.com/" },

      {
        property: "og:description",
        content:
          "Savinginsta: Easily download Instagram videos, reels, and photos with our user-friendly tool. Save your Instagram videos quickly and safely on any device.",
      },
      //Twitter
      { name: "twitter:card", content: "summary" },
      { name: "twitter:url", content: "https://savinginsta.com/" },
      {
        name: "twitter:title",
        content: "Instagram Downloader - Download Instagram Video online",
      },
      {
        name: "twitter:description",
        content:
          "Savinginsta: Easily download Instagram videos, reels, and photos with our user-friendly tool. Save your Instagram videos quickly and safely on any device.",
      },
      //multilingual
      {
        name: "google",
        content: "notranslate",
      },
      {
        itemprop: "image",
        content: "https://savinginsta.com/static/images/savinginsta_thumbnail.jpg",
      },
      {
        property: "og:image",
        content: "https://savinginsta.com/static/images/savinginsta_thumbnail.jpg",
      },
      {
        name: "twitter:image",
        content: "https://savinginsta.com/static/images/savinginsta_thumbnail.jpg",
      },
    ],
    link: [
      //multilingual
      {
        rel: "alternate",
        hreflang: "x-default",
        href: "https://savinginsta.com/",
      },
      {
        rel: "alternate",
        hreflang: "en",
        href: "https://savinginsta.com/",
      },
      {
        rel: "alternate",
        hreflang: "en-in",
        href: "https://savinginsta.com/in",
      },
      {
        rel: "alternate",
        hreflang: "vi",
        href: "https://savinginsta.com/vn",
      },
      {
        rel: "alternate",
        hreflang: "tr",
        href: "https://savinginsta.com/tr",
      },
      {
        rel: "alternate",
        hreflang: "id",
        href: "https://savinginsta.com/id",
      },
      {
        rel: "alternate",
        hreflang: "fr",
        href: "https://savinginsta.com/fr",
      },
      {
        rel: "alternate",
        hreflang: "pt",
        href: "https://savinginsta.com/pt",
      },
      {
        rel: "alternate",
        hreflang: "ru",
        href: "https://savinginsta.com/ru",
      },
      {
        rel: "alternate",
        hreflang: "es",
        href: "https://savinginsta.com/es",
      },
      {
        rel: "alternate",
        hreflang: "ms",
        href: "https://savinginsta.com/ms",
      },
      {
        rel: "alternate",
        hreflang: "ko",
        href: "https://savinginsta.com/ko",
      },
      {
        rel: "alternate",
        hreflang: "ja",
        href: "https://savinginsta.com/ja",
      },
      {
        rel: "alternate",
        hreflang: "jv",
        href: "https://savinginsta.com/jv",
      },
      {
        rel: "alternate",
        hreflang: "cs",
        href: "https://savinginsta.com/cs",
      },
      {
        rel: "alternate",
        hreflang: "de",
        href: "https://savinginsta.com/de",
      },
      {
        rel: "alternate",
        hreflang: "it",
        href: "https://savinginsta.com/it",
      },
      {
        rel: "alternate",
        hreflang: "pl",
        href: "https://savinginsta.com/pl",
      },
      {
        rel: "alternate",
        hreflang: "hu",
        href: "https://savinginsta.com/hu",
      },
      {
        rel: "alternate",
        hreflang: "nl",
        href: "https://savinginsta.com/nl",
      },
      {
        rel: "alternate",
        hreflang: "ro",
        href: "https://savinginsta.com/ro",
      },
      {
        rel: "alternate",
        hreflang: "el",
        href: "https://savinginsta.com/el",
      },
      {
        rel: "canonical",
        href: "https://savinginsta.com/",
      },
    ],
    script: [
      {
        json: {
          "@context": "https://schema.org",
          "@type": "WebSite",
          name: "Instagram Downloader - Download Instagram Video online",
          url: "https://savinginsta.com",
          description:
            "Savinginsta: Easily download Instagram videos, reels, and photos with our user-friendly tool. Save your Instagram videos quickly and safely on any device.",
          publisher: {
            "@type": "Organization",
            name: "Savinginsta",
            logo: {
              "@type": "ImageObject",
              url: "https://savinginsta.com/static/images/logo.webp",
            },
          },
        },
        type: "application/ld+json",
      }
    ],
  },
  data() {
    return {
      input: "",
      success: false,
      isHttpLoading: false,
      httpError1: false,
      httpError2: false,
      current: 0,
      successList: [],
      faqList: [
        {
          title: `What's an Instagram Video Downloader?`,
          content: `It's a handy online tool for saving Instagram photos, videos, and IGTV content for later. Savinginsta is a top pick for easy Instagram content downloads.`,
        },
        {
          title: `Do I Need to Log into My Instagram Account to Use Savinginsta?`,
          content: `Nope, no login required. Savinginsta offers secure and anonymous Instagram downloads without needing any personal info.`,
        },
        {
          title: `Can I Save Videos Directly from Instagram?`,
          content: `Instagram doesn't allow direct downloads from your feed or others' stories. But Savinginsta provides a simple workaround. Just head to their website at https://savinginsta.com and follow the easy steps.`,
        },
        {
          title: `Is Savinginsta's Instagram Video & Photo Download Service Free?`,
          content: `It's free! Feel free to download as much as you desire without any restrictions.`,
        },
        {
          title: `Can I Download Content from Private Instagram Accounts?`,
          content: `Yes, Savinginsta lets you download videos, stories, and photos from private accounts. Check out their platform for detailed instructions.`,
        },
        {
          title: `Can I Save Instagram Stories?`,
          content: `Absolutely! With Savinginsta, you have the power to view and download any Instagram story at your fingertips. Just click on the story's three dots (⁝), copy the link, and paste it into Savinginsta to begin the download.`,
        },
        {
          title: `Does Savinginsta Work on Computers?`,
          content: `Savinginsta works perfectly on PCs, allowing you to download Instagram videos, photos, stories, and more straight to your computer.`,
        },
        {
          title: `Can I Use Savinginsta on Android Devices to Download from Instagram?`,
          content: `Android users can copy the Instagram post link, paste it into Savinginsta, and save it away. For more details, check out their guide on downloading from Instagram on Android.`,
        },
        {
          title: `How Do I Download Instagram Videos and Photos on iPhone/iPad (iOS)?`,
          content: `Savinginsta has a step-by-step guide for downloading videos to your iPhone or iPad. Just follow this link: Download Instagram Videos on iPhone.`,
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["language"]),
  },
  mounted() {
    this.debouncedDownInput = this.debounce(this.downInput, 1000);
    let path = this.$route.path;
    if (path == "/" && this.language == "en") {
      this.$router.push("/");
    } else {
      this.$router.push(this.language);
    }
    //到达首页
    handleClick("guide_homepage_frist", {});
    handleClick("guide_homepage", {});
  },
  methods: {
    async downloadHandel() {
      if (this.isHttpLoading || this.input === "") return;
      this.isHttpLoading = false;
      this.httpError1 = false;
      this.httpError2 = false;
      this.input = this.input.replace(/^.*\s?https:\/\//, "https://");
      const insUrlPattern = new RegExp("^http(s|)://.*instagram.com.*/.*$");
      let type = checkString(this.input);
      if (!insUrlPattern.test(this.input)) {
        //点击解析下载按钮
        handleClick("action_ins_detect_boinsom", {
          site: "other",
          noislink: this.input,
          from: "video",
          type: type,
        });
        this.httpError2 = true;
        this.isHttpLoading = false;
        return;
      }
      //点击解析下载按钮
      handleClick("action_ins_detect_boinsom", {
        site: "other",
        from: "video",
        type: type,
      });
      //开始解析  ins_start_resolve
      handleClick("ins_start_resolve", {
        islink: this.input,
        from: "video",
        type: type,
      });
      this.isHttpLoading = true;
      try {
        let result = this.uki(this.input);
        const response = await fetch(
          "https://savinginsta.com/api/downloader/analysis",
          {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
              path: result,
            }),
          }
        );
        let encryptedResponse = await response.text();
        let parse = JSON.parse(encryptedResponse);
        if (parse.code != 200) {
          // 解析失败  ins_resolve_fail
          handleClick("ins_resolve_fail", {
            reason: "Failed to fetch",
            islink: this.input,
            from: "video",
            type: type,
          });
          this.httpError1 = true;
          this.isHttpLoading = false;
          return;
        } else {
          //解析成功  ins_resolve_success
          handleClick("ins_resolve_success", {
            type: type,
            from: "video",
          });
          let decryptedResponse = await this.eki(parse.data); // 使用你的解密函数
          this.successList = JSON.parse(decryptedResponse);
          this.success = true;
          this.isHttpLoading = false;
        }
      } catch (error) {
        // 解析失败  ins_resolve_fail
        handleClick("ins_resolve_fail", {
          reason: "Failed to fetch",
          islink: this.input,
          from: "video",
          type: type,
        });
        console.error(error);
        this.httpError1 = true;
        this.isHttpLoading = false;
      }
    },

    uki(input) {
      let CIPHER_ALGORITHM = "DES-CBC";
      let IV_SIZE = 8;

      try {
        const complexKey = [
          process.env.part1,
          process.env.part2,
          process.env.part3,
          process.env.part4,
          process.env.part5,
          process.env.part6,
          process.env.part7,
          process.env.part8,
        ].join("");
        const keyBytes = CryptoJS.enc.Utf8.parse(complexKey);
        const inputBytes = CryptoJS.enc.Utf8.parse(input);
        const ivBytes = CryptoJS.lib.WordArray.random(IV_SIZE);
        const encrypted = CryptoJS.DES.encrypt(inputBytes, keyBytes, {
          iv: ivBytes,
          mode: CryptoJS.mode.CBC,
          padding: CryptoJS.pad.Pkcs7,
        });
        const ciphertext = ivBytes.concat(encrypted.ciphertext);
        return ciphertext.toString();
      } catch (error) {
        console.error(error);
        return null;
      }
    },
    eki(cipherText) {
      let CIPHER_ALGORITHM = "DES-CBC";
      let IV_SIZE = 8;

      const complexKey = [
        process.env.part1,
        process.env.part2,
        process.env.part3,
        process.env.part4,
        process.env.part5,
        process.env.part6,
        process.env.part7,
        process.env.part8,
      ].join("");
      try {
        let keyBytes = CryptoJS.enc.Utf8.parse(
          complexKey.padEnd(CIPHER_ALGORITHM === "DES-CBC" ? 8 : 16)
        );
        let ivBytes = { iv: CryptoJS.enc.Hex.parse(process.env.DES_IV) }; // 如果使用CBC模式，需要一个初始化向量iv，这里是空向量
        let decrypted = CryptoJS.DES.decrypt(
          { ciphertext: CryptoJS.enc.Hex.parse(cipherText) },
          keyBytes,
          ivBytes
        );
        return decrypted.toString(CryptoJS.enc.Utf8);
      } catch (e) {
        console.error(e);
        return null;
      }
    },
    sendDownload(event) {
      if (event.keyCode === 13 && !this.isHttpLoading) {
        this.downloadHandel();
        event.preventDefault();
        return false;
      }
    },
    changeTab(k) {
      this.current = k;
    },
    handleInput(e) {
      this.debouncedDownInput(e);
    },
    debounce(fn, delay) {
      let timer;
      return function () {
        let context = this;
        let args = arguments;
        clearTimeout(timer);
        timer = setTimeout(() => {
          fn.apply(context, args);
        }, delay);
      };
    },

    downInput(e) {
      let type = checkString(e.target.value);
      // 粘贴链接到输入框 action_ins_paste
      handleClick("action_ins_paste", {
        islink: e.target.value,
        from: "photo",
        type: type,
      });
    },
    handleClickPasted() {
      if (!navigator.clipboard) {
        console.log("Clipboard API not available");
        return;
      }
      navigator.clipboard
        .readText()
        .then((text) => {
          this.input = text;
          let type = checkString(text);
          // 粘贴链接到输入框 action_ins_paste
          handleClick("action_ins_paste", {
            islink: text,
            from: "photo",
            type: type,
          });
        })
        .catch((err) => {
          console.error("Failed to read clipboard contents: ", err);
        });
    },
    showLanguageHandel() {
      this.$refs.languageRef.close();
    },
    refresh() {
      this.success = false;
      this.input = "";
      this.successList = [];
    },
    goToTop(site) {
      //切换页面
      handleClick("action_page_switch", {
        site: site,
        from: top,
      });
    },
    goToTools(site) {
      //切换页面
      handleClick("action_page_switch", {
        site: site,
        from: tools,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/static/style/index.css";
.loading {
  .loading-dots {
    position: relative;
    z-index: 999;
    margin-top: 70px;
  }

  .dot {
    background-color: #ffffff;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 10px;
    animation: loading-animation 1.5s infinite;
  }

  .dot:nth-child(2) {
    animation-delay: 0.5s;
  }

  .dot:nth-child(3) {
    animation-delay: 0.8s;
  }
  .dot:nth-child(4) {
    animation-delay: 1s;
  }
}
@keyframes loading-animation {
  0%,
  50%,
  80%,
  100% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.5);
  }
}
@media (max-width: 768px) {
  .loading {
    .loading-dots {
      margin-top: 26px !important;
    }
    .dot {
      width: 8px !important;
      height: 8px !important;
    }
  }
}
</style>
